<template>
    <div style="min-width:800px; overflow: auto">
        <el-col :span="24">
            <el-col :span="2" :offset="15">
                <div class="welcome">
                        您好，
                    <template v-if="readerName !== '' && readerName !== undefined && readerName !== null ">
                        <el-dropdown trigger="hover">
                            <span class="el-dropdown-link reader-inner">{{readerName}}
                                <i class="el-icon-caret-bottom"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item @click.native="toResetPwd">修改密码</el-dropdown-item>
                                <el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </template>
                    <template v-else>
                        <a @click="toLogin()">请登录</a>&emsp;<a @click="toRegister()">免费注册</a>
                    </template>
                </div>
            </el-col>
            <el-col :span="1">
                <div class="welcome">
                    <span @click="toBookEntry()">首页</span>
                </div>
            </el-col>
            <el-col :span="1">
                <div class="welcome">
                        <a @click="toMyBook()">我的图书</a>
                </div>
            </el-col>
            <el-col :span="1">
                <div class="welcome">
                        <span @click="toMyComment()">我的评论&nbsp;</span>
                </div>
            </el-col>
            <el-col :span="1">
                <div class="welcome">
                    <span @click="toMyFriends()">我的好友&nbsp;</span>
                </div>
            </el-col>
            <el-col :span="1">
                <div class="welcome">
                    <span  @click="toCommunityInfo()">图书社区&nbsp;</span>
                </div>
            </el-col>
        </el-col>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                readerName: ''
            };
        },
        created () {
            this.readerName = sessionStorage.getItem('readerName');
        },
        methods: {
            logout() {
                let _this = this;
                this.$confirm('确认退出吗?', '提示', {
                    //type: 'warning'
                }).then(() => {
                    sessionStorage.removeItem('readerName');
                    sessionStorage.removeItem('readerId');
                    if ("reader-book-entry" !== _this.$router.history.current.name) {
                        this.$router.push('/reader/book/book-entry');
                    }
                    _this.$router.go(0);
                }).catch(() => {

                });
            },
            checkLogin() {
                let readerId = sessionStorage.getItem('readerId');
                if (readerId === '' || readerId === null ) {
                    this.$notify({
                        title: '提示',
                        message: '请先登录',
                        type: 'warning'
                    });
                    return false;
                } else {
                    return true;
                }
            },
            toResetPwd() {
                this.$router.push('/reader/reset-pwd');
            },
            toBookEntry() {
                this.$router.push('/reader/book/book-entry');
            },
            toLogin() {
                this.$router.push('/reader/login');
            },
            toRegister() {
                this.$router.push('/reader/register');
            },
            toMyBook() {
                if(!this.checkLogin()) {
                    return;
                }
                this.$router.push({
                    name: "reader-my-book"
                })
            },
            toMyComment() {
                if(!this.checkLogin()) {
                    return;
                }
                this.$router.push({
                    name: "reader-my-comment"
                })
            },
            toMyFriends() {
                if(!this.checkLogin()) {
                    return;
                }
                this.$router.push({
                    name: "reader-my-friend"
                })
            },
            toCommunityInfo() {
                this.$router.push({
                    name: "reader-community-info"
                })
            }
        }
    }
</script>
<style>
    .welcome {
        color: #777;
        font: normal 12px/36px Bitter, Myriad Pro, Verdana, serif;
        cursor: pointer;
    }
    .reader-inner {
        cursor: pointer;
    }
</style>
